import { View } from "@tarojs/components";
import getSystemInfo from "utils/getSystemInfo";
import "./index.scss";
import Icon from "components/Icon";
import { useState } from "react";

export default function RealTabBar(props) {
  const { tabList } = props;
  const [selectKey, setSelectKey] = useState(props?.defaultValue);
  const { placeHolderHeight = 0, tabbarHeight = 54 } = getSystemInfo();

  return (
    <View
      className="tab-bar"
      style={{ height: `${tabbarHeight + placeHolderHeight / 2}px` }}
    >
      <View className="tab-bar-wrap" style={{ height: tabbarHeight }}>
        {tabList.map((item) => (
          <View
            key={item.iconPath}
            className={`tab-bar-wrap-item ${
              selectKey === item?.iconPath ? "tab-bar-wrap-choose" : ""
            }`}
            onClick={() => {
              setSelectKey(item.iconPath);
              props?.onSetViewKey(item.iconPath);
            }}
          >
            <View className="tab-bar-wrap-item-iconGroup-icon">
              <Icon size={28} name={item.iconPath} />
            </View>
          </View>
        ))}
      </View>
    </View>
  );
}
